<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 200px;height: 40px;line-height: 40px;text-align: center;position: absolute;left: 0;top:200px;background: #ccc}
    </style>
</head>
<body>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <p>段落</p>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <h2>二级标题</h2>
    <div class="box">
        这是悬浮框
    </div>
</body>
<script src="../move.js"></script>
<script>
    const obox = document.querySelector(".box");
    const oboxT = obox.offsetTop;
    
    window.onscroll = function(){
        const t = document.documentElement.scrollTop;

        // obox.style.top = oboxT + t + "px";

        move(obox, {
            top: oboxT + t
        });
    }

    // 原理：
        // 利用absolute模拟fixed的效果：
        //     滚动时，获取滚走了的距离，加上初始top，重新设置给元素的top

</script>
</html>